<template>
  <div class="home">
    <div class="card">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>电梯概况</span>
        </div>
        <div class="t1" @click="showEle('')">电梯总数<el-badge class="mark" :value="obj.eleAll" /></div>
<!--        <div class="t1" @click="showEle(2)">鄂城区<el-badge class="mark" :value="obj.ele702" /></div>-->
<!--        <div class="t1" @click="showEle(3)">华容区<el-badge class="mark" :value="obj.ele703" /></div>-->
<!--        <div class="t1" @click="showEle(4)">梁子湖区<el-badge class="mark" :value="obj.ele704" /></div>-->
<!--        <div class="t1" @click="showEle(5)">葛店经开区<el-badge class="mark" :value="obj.ele705" /></div>-->
<!--        <div class="t1" @click="showEle(6)">临空经济区<el-badge class="mark" :value="obj.ele706" /></div>-->
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本概况</span>
        </div>
        <div class="t1" @click="gotoPage(1)">维保单位<el-badge class="mark" :value="obj.maintOrgNum" align='right' /></div>
        <div class="t1" @click="gotoPage(2)">使用单位<el-badge class="mark" :value="obj.useOrgNum" /></div>
        <div class="t1" @click="gotoPage(3)">维保人员<el-badge class="mark" :value="obj.userNum" /></div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>维保工单</span>
        </div>
        <div class="t2" >计划工单数<el-badge class="mark" :value="obj.taskNum" /></div>
        <div class="t1" @click="gotoPage(5)">完成工单数<el-badge class="mark" :value="obj.taskDone" /></div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>预警通知</span>
        </div>
        <div class="t1" @click="gotoPage(6)">资质过期人员<el-badge class="mark" :value="obj.userOut" /></div>
        <div class="t1" @click="gotoPage(7)">脱保电梯<el-badge class="mark" :value="obj.eleOut" /></div>
      </el-card>
    </div>
    <div class="echart" style="margin-top:15px">
      <el-tabs type="card" @tab-click="handleClick">
<!--        <el-tab-pane label="全部" code=""></el-tab-pane>-->
<!--        <el-tab-pane label="鄂城区" code="420704"></el-tab-pane>-->
<!--        <el-tab-pane label="华容区" code="420703"></el-tab-pane>-->
<!--        <el-tab-pane label="梁子湖区" code="420702"></el-tab-pane>-->
      </el-tabs>
      <baidu-map class="map" :center="mapCenter"  :zoom="mapZoom" :scroll-wheel-zoom="true" @ready="handlerBMap"/>
    </div>
  </div>
</template>
<script>
import {getAdminMaintAllEleList,getAdminBaseInfo} from "@/api/adminhome";
export default {
  data () {
    return {
      mapZoom: 12,
      mapCenter: { lng: 111.33011638810164, lat: 30.71872667088478 },
      tableData:[],
      obj: {
      }
    }
  },
  components: {
  },
  methods: {
    openInfo(item, p) {
      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
      var infoWindow = new BMap.InfoWindow(this.content, this.opts); // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point); //开启信息窗口
    },
    handlerBMap ({ BMap, map }) {
      this.BMap = BMap
      this.map = map
    },
    makerCenter (point,item) {
      if (this.map) {
        // this.map.clearOverlays()
        var mark=new this.BMap.Marker(point)
        this.map.addOverlay(mark)
        mark.addEventListener("click",r=>{
          this.content = `
           <div class="pop_container" ref="popContainer">
              <section>
                 <p><label>设备注册代码：</label><span>${item.eleCode}</span></p>
                 <p><label>设备类型：</label><span>${item.eleTypeName}</span></p>
                 <p><label>设备状态：</label><span>${item.eleStatus}</span></p>
                 <p><label>维保单位：</label><span>${item.maintOrgName}</span></p>
                 <p><label>使用单位：</label><span>${item.useOrgName}</span></p>
                 <p><label>电梯地址：</label><span>${item.eleUseCommunity}</span></p>
              </section>
          </div>
                        `;

          this.opts = {
            width: 400,
            height: 150,
            enableMessage: true
          };
          var p = mark.getPosition(); //获取marker的位置
          var marker1 = new BMap.Marker(new BMap.Point(p.lng, p.lat));
          this.openInfo(item, marker1);
        });
        this.mapCenter.lng = point.lng
        this.mapCenter.lat = point.lat
        this.mapZoom = 16
      }
    },
    showEle (code) {
        this.$router.push('/admin-ele/admin-ele-info?manageId='+code)
    },
    gotoPage (type) {
      if (type == 1) {
        this.$router.push('/maint-admin/maint-org/maint-org-list')
      }
      else if (type == 2) {
        this.$router.push('/use-org/user-org-info')
      }
      else if (type == 3) {
        this.$router.push('/maint-person/maint-person-info')
      }
      else if (type == 5) {
        this.$router.push('/maint-admin/maint-admin-task/maint-admin-task-list')
      }
      else if (type == 6) {
        this.$router.push('/maint-admin/maint-org/maint-user-warn')
      }
      else if (type == 7) {
        this.$router.push('/admin-ele/no-maint-ele')
      }

    },
    // 获取看板数据
    getData () {
      getAdminBaseInfo().then(res => {
        if (res.data.code == '200') {
          console.log(res)
          this.obj = res.data.data
        }
      })
      this.showMap('');
    },
    handleClick(tab, event) {
      let code=tab.$attrs.code;
      this.showMap(code)
    },
    showMap(code){
      let query={eleAreaCode:code}
      getAdminMaintAllEleList(query).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data

          this.map.clearOverlays()
          var points = [];
          this.tableData.forEach(item=>{
            let lng = item.eleLocation.split(',')[0]
            let lat = item.eleLocation.split(',')[1]
            var point = new BMap.Point(lat,lng)
            // map.addOverlay(new this.BMap.Marker(point))
            // this.makerCenter(point,item)

            point.item=item;


            points.push(point);
          });
          var options = {
            size: BMAP_POINT_SIZE_BIG,    //BMAP_POINT_SIZE_SMALL
            shape: BMAP_POINT_SHAPE_WATERDROP,
            color: '#D84C29'
          }
          var pointCollection = new BMap.PointCollection(points,options); // 初始化PointCollection
          pointCollection.addEventListener('click', function(e) {// 监听点击事件
            debugger
          var item=e.point.item;
            this.content = `
           <div class="pop_container" ref="popContainer">
              <section>
                 <p><label>设备注册代码：</label><span>${item.eleCode}</span></p>
                 <p><label>设备类型：</label><span>${item.eleTypeName}</span></p>
                 <p><label>设备状态：</label><span>${item.eleStatus}</span></p>
                 <p><label>维保单位：</label><span>${item.maintOrgName}</span></p>
                 <p><label>使用单位：</label><span>${item.useOrgName}</span></p>
                 <p><label>电梯地址：</label><span>${item.eleUseCommunity}</span></p>
              </section>
          </div>
                        `;

            this.opts = {
              width: 400,
              height: 150,
              enableMessage: true
            };
            var p = e.point; //获取marker的位置
            var point =new BMap.Point(p.lng, p.lat);
            var infoWindow = new BMap.InfoWindow(this.content, this.opts); // 创建信息窗口对象
            this.map.openInfoWindow(infoWindow, point); //开启信息窗口
          });
          this.map.addOverlay(pointCollection); // 添加Overlay

        }
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>
<style lang='less' scoped>
.home{
  height: 100%;
}
.echart {
  height: calc(100% - 230px);
  .map {
    width: 100%;
    height: calc(100% - 41px);
    margin-top:-15px;
    ::v-deep .BMap_cpyCtrl {
      display: none !important;
    }

    ::v-deep .anchorBL {
      display: none !important;
    }
  }
}
.card {
  display: flex;
  justify-content: space-between;
  .box-card {
    width: 24%;
    .clearfix {
      color: #333;
      font-weight: bold;
    }
    ::v-deep .el-card__body {
      padding: 10px 20px;
    }
    .t1 {
      color: #337ac7;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      line-height: 30px;
      // .mark{
      //   float: right;
      // }
      ::v-deep .el-badge__content {
        margin-bottom: 10px;
      }
    }
    .t2 {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      line-height: 30px;
      // .mark{
      //   float: right;
      // }
      ::v-deep .el-badge__content {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
